<template>
	<view class="videoPlayer">
		<video id="myVideo" :src="item.playUrl" :title="item.title" :autoplay="autoplay" :loop="true" :controls="false"
			 @click="click()" class="video"></video>
	</view>
</template>

<script>
	var timer = null
	export default {
		name: "videoplay",
		props: {
			item: {
				type: Object,
				default: {}
			},
			index: {
				type: Number,
				default: 0
			},
			canshu:{
				type:Number,
				default: 0
			}
		},
		data() {
			return {
				play: false,
				dblclick: false,
				autoplay: false
			};
		},
		mounted() {
			// 创建并返回 video 上下文 videoContext 对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内 <video> 组件。
			this.videoContext = uni.createVideoContext('myVideo', this)
		},
		methods: {
			
			click() {
				clearTimeout(timer)
				this.dblclick = !this.dblclick
				timer = setTimeout(() => {
					if (this.dblclick) {
						//判断是单击 即为true
						//单击
						if (this.play === false) {
							this.playThis()
						} else {
							this.pause()
						}
					} else {
						//双击
						this.$emit('changeClick') //向父组件传递一个事件
					}
					this.dblclick = false //点击后重置状态 重置为false
				}, 500)
			},
			//从头播放视频
			player() {
				if (this.play === false) {
					this.videoContext.seek(0)
					this.videoContext.play()
					this.play = true
				}
			},
			//暂停视频
			pause() {
				if (this.play === true) {
					this.videoContext.pause()
					this.play = false
				}
			},
			//播放当前视频
			playThis() {
				if (this.play === false) {
					this.videoContext.play()
					this.play = true
				}
			},
			//首个视频自动播放
			auto() {
				if (this.index === 0) {
					this.autoplay = true
				}
			},

		},
		created() {
			this.auto()
			
		}
	}
</script>

<style lang="scss">
	.videoPlayer {
		height: 100%;
		width: 100%;

		.video {
			height: 100%;
			width: 100%;

		}

	}
</style>
